<template>
    <div style="display: flex; margin: 10px 0;">

        <el-card style="width: 50%; margin-right: 10px;">
            <div slot="header" class="clearfix">
                <h2>文件管理子路由界面</h2>
            </div>
            <div>
                <el-upload action="http://localhost:9090/file/upload" :headers="{ token: user.token }"
                list-type="picture" 
                    :on-success="handleFileUpload">
                    <el-button size="mini" type="primary">单文件上传</el-button>
                </el-upload>
            </div>
            <div style="margin: 10px 0;">
                <el-upload action="http://localhost:9090/file/upload" :headers="{ token: user.token }"
                 multiple 
                    :on-success="handleMultipleFileUpload">
                    <el-button size="mini" type="primary">多文件上传</el-button>
                </el-upload>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    name: 'FileManagement',
    // 这里可以添加管理员界面的逻辑和数据
    components: {
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem('honey-user') || "{}"),
            urls: [],
        }
    },
    methods:{
        handleFileUpload(response, file, fileList) {
            console.log(response, file, fileList)
        },
        handleMultipleFileUpload(response, file, fileList) {
            // this.urls = fileList.map(item => item.response?.data)
            console.log(response, file, fileList)
        }
    }
};
</script>

<style scoped>
.admin-welcome {
    text-align: center;
    padding: 20px;
}

/* 在此添加样式以美化管理员界面 */
</style>